@use '../core' as *;

// Copy of ag-grid.com menu styles, before we bring the whole component across

.whatsNewLink a {
    display: block;
    position: relative;
    width: fit-content;
    margin-bottom: $spacing-size-4;
    padding: 2px 10px;
    text-decoration: none;
    font-size: var(--text-fs-sm);
    color: var(--color-logo-orange);
    border-radius: 24px;
    border: 1px solid var(--color-logo-orange);
    transition: background-color $transition-default-timing, color $transition-default-timing;
    -webkit-font-smoothing: auto;

    &:hover,
    &:focus {
        background-color: color-mix(in srgb, var(--color-logo-orange) 5%, var(--color-bg-primary));
        color: var(--color-logo-orange);
    }

    #{$selector-darkmode} & {
        &:hover,
        &:focus {
            background-color: color-mix(in srgb, var(--color-logo-orange) 10%, var(--color-bg-primary));
        }
    }
}

.menu {
    $top-bar-height: 58px;

    font-size: var(--text-fs-base);
    width: 100%;

    @media screen and (min-width: $breakpoint-docs-nav-medium) {
        --menu-horizontal-margin: #{$spacing-size-4};

        flex-shrink: 0;
        padding-right: var(--menu-horizontal-margin);

        @supports (position: sticky) {
            position: sticky;
            top: $top-bar-height;
            height: calc(100vh - #{$top-bar-height});
            overflow: hidden;
            overflow-y: auto;
        }
    }
}

.menuInner {
    flex-basis: auto;
    flex-direction: column;
    max-width: $spacing-size-64 + $spacing-size-4;
    padding-bottom: $spacing-size-16;

    li {
        margin-bottom: $spacing-size-1;
    }

    li li {
        margin-bottom: 0;
    }

    hr {
        height: 1px;
        margin-top: $spacing-size-4;
        margin-bottom: $spacing-size-4;
        background-color: var(--color-border-secondary);
    }

    h5 {
        padding-left: 6px;
        font-weight: var(--text-bold);
        color: var(--color-fg-secondary);
    }

    @media screen and (min-width: $breakpoint-docs-nav-medium) {
        display: block;
        padding-top: 0;
    }
}

button.sectionHeader {
    width: 100%;
    padding-top: $spacing-size-1;
    padding-bottom: $spacing-size-2;
    margin-top: 0;
    font-weight: var(--text-semibold);
    border: 2px solid transparent;
    outline: none;
    transition: color $transition-default-timing, border-color $transition-default-timing;
    border-radius: var(--radius-sm);

    &:focus-visible {
        border-color: var(--color-button-primary-shadow-focus);
    }

    &:hover {
        color: var(--color-fg-primary);
        border: 2px solid transparent;
    }

    &:hover .sectionIcon {
        transform: translateX(3px);
    }

    &.active {
        transition: color $transition-default-timing;
    }

    li:first-child & {
        margin-top: $spacing-size-2;
    }

    + .menuGroup {
        padding-bottom: $spacing-size-2;
    }

    .sectionIcon {
        --icon-size: 20px;

        position: relative;
        top: -1px;
        fill: var(--color-util-gray-400);

        #{$selector-darkmode} & {
            fill: var(--color-fg-primary);
        }

        transition: transform 0.33s ease-in-out, fill $transition-default-timing;

        &.active {
            transform: rotate(90deg);
        }
    }
}

.menuGroup {
    --first-indent-size: 12px;
    --indent-size: 20px;

    line-height: var(--text-lh-tight);
    font-size: var(--text-fs-regular);
    font-weight: var(--text-semibold);
    -webkit-font-smoothing: antialiased;

    ul a,
    ul .groupLabel {
        padding-left: calc(var(--first-indent-size) + var(--indent-size));
    }

    ul ul a,
    ul ul .groupLabel {
        padding-left: calc(var(--first-indent-size) + var(--indent-size) * 2);
    }

    ul ul ul a,
    ul ul ul .groupLabel {
        padding-left: calc(var(--first-indent-size) + var(--indent-size) * 3);
    }

    .enterpriseIcon {
        --icon-size: 1.15em;
        --color-icon: var(--color-enterprise-icon);

        position: relative;
        margin-left: 4px;
        color: transparent;

        svg {
            position: absolute;
            left: 0;
            transform: translate(-0.05em, 0.075em);
        }
    }
}

.menuGroup a,
.singleItem {
    --active-color: var(--color-util-brand-500);
    --active-border: var(--color-util-brand-400);
    --hover-background: var(--color-util-brand-50);
    --active-background: var(--color-util-brand-50);

    position: relative;
    display: block;
    margin-left: var(--first-indent-size);
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: $spacing-size-4;
    color: var(--color-fg-secondary);
    border-left: 1px solid transparent;
    outline: none;
    transition: color 0.33s ease-in-out, border-color 0.33s ease-in-out, background-color 0.33s ease-in-out;
    line-height: var(--text-lh-sm);

    #{$selector-darkmode} & {
        --active-color: var(--color-brand-300);
        --active-border: var(--color-brand-300);
        --hover-background: rgba(56, 146, 249, 0.06);
        --active-background: rgba(56, 146, 249, 0.09);

        -webkit-font-smoothing: antialiased;
    }

    &:hover {
        background-color: var(--hover-background);
    }

    #{$selector-darkmode} & {
        &:hover {
            color: var(--color-fg-primary);
        }
    }

    &:focus-visible {
        border-color: var(--color-input-border-hover);
    }

    &.activeItemParent {
        color: color-mix(in oklch, var(--color-fg-primary) 66.66%, var(--color-fg-secondary));
    }

    &:hover,
    &.activeMenuItem {
        color: var(--active-color);
    }

    &.activeMenuItem {
        pointer-events: none;
        background-color: var(--active-background);
        border-left-color: var(--active-border);
    }
}

.singleItem {
    margin-left: $spacing-size-3;
    padding: $spacing-size-2 $spacing-size-2 $spacing-size-2 $spacing-size-3;
}

.menuGroup li a {
    padding-top: 7px;
    padding-bottom: 7px;
    border-left: 1px solid var(--color-border-primary);
}

.menuGroup .groupLabel {
    display: block;
    margin-left: var(--first-indent-size);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: $spacing-size-4 + 2px;
    border-left: 1px solid var(--color-border-primary);
    color: var(--color-util-gray-400);
    transition: color $transition-default-timing;

    #{$selector-darkmode} & {
        color: var(--color-util-gray-500);
    }

    &.activeItemParent {
        color: var(--color-text-primary);
    }
}
